<!DOCTYPE html>
<html>
<head>
	<title>Home</title>
	<!-- for-mobile-apps -->
	<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>

	<meta name="viewport" id="WebViewport" content="width=750, initial-scale=1 user-scalable = 0" />

	<script language="javascript">  
		if(screen.width<750)
		{  
			document.getElementById('WebViewport').setAttribute('content', 'width=750px,initial-scale=' + screen.width / 750 + ',target-densitydpi=device-dpi,user-scalable=0');  
		}  
	</script>  

	<link rel="stylesheet" href="css/weui.min.css">
	<link rel="stylesheet" href="css/calendar.css">

	<style>
	html {
		font: 500 24px 'roboto';
		color: #333;
		background-color: #fafafa;
	}
	a {
		text-decoration: none;
	}
	ul, ol, li {
		list-style: none;
		padding: 0;
		margin: 0;

	}
	#demo {
		width: 750px;
        margin-bottom: 20px;
        border-bottom:2px solid #e8e8e8;
        overflow: visible;
	}
	p {
		margin: 0;
	}

	#dt {
		margin: 30px auto;
		height: 28px;
		width: 200px;
		padding: 0 6px;
		border: 1px solid #ccc;
		outline: none;
	}
	*{margin:0px;padding:0px;}
	.header{height:280px;
		width:750px;
		position:relative;
		background:linear-gradient(0deg,#ffb1a2 0%,#ff9884 100%);
	}
	.header:after{
		bottom:-54px;
		width:100%;
		height:54px;
		content:" ";
		background-image:url("image/bg_img.png");
		position:absolute;
	}	

   .weui-switch:checked:after {
    -webkit-transform: translateX(20px);
    transform: translateX(50px)!important;
}

</style>

</head>

<body>
    <div class="content" style="display: none">
      <div class="title">
         <p>为了提高预测准确性</p>
         <p>请填写好经期数据哦</p>
      </div>
      <div class="select">
         <div>
            <div>
                <p>月经周期</p><p>两次月经第一天的间隔世间</p>
            </div>
            <div>
                周期<span id="picker1">28</span>天
            </div>      
         </div>
         <div>
            <div>
                <p>周期长度</p><p>每次月经持续天数</p>
            </div>
            <div>
                经期<span id="picker2">5</span>天
            </div>      
         </div>
         <div>
            <div>
                <p>最近一次月经</p><p>最后一次经期日期</p>
            </div>
            <div>
                <span id="picker2">2018-03-28</span>
            </div>      
         </div>
      </div>
      <div class="submit-btn">
         
         <form id="form" onsubmit="return false" action="##" method="post">
              <button type="button" onclick = "login()" value="保存">保存</button>
         </form>
      </div>
            <h3>Picker</h3>
  <div id="chose">选择城市</div>

    </div>

   <div class="content2">
    	<div id="demo">
    		<div id="ca"></div>
    	</div>
        <div style="width:100%;height:120px">
            <ul>
                <li><div style="margin-left:25px;height:20px;width:20px;background:#ff9884;float:left;border-radius:5px"></div><div style="color:#ff9884;height:20px;float:left;line-height:20px;font-size:20px;margin-left:5px">月经期间</div></li>
                <li><div style="margin-left:25px;height:20px;width:20px;background:#6ecec4;float:left;border-radius:5px"></div><div style="color:#6ecec4;height:20px;float:left;line-height:20px;font-size:20px;margin-left:5px">排卵期</div></li>
                <li><div style="margin-left:25px;height:20px;width:20px;background:#35c18e;float:left;border-radius:5px"></div><div style="color:#35c18e;height:20px;float:left;line-height:20px;font-size:20px;margin-left:5px">排卵日</div></li>
                <li><div style="margin-left:25px;height:20px;width:20px;background:#ffded8;float:left;border-radius:5px"></div><div style="color:#ffded8;height:20px;float:left;line-height:20px;font-size:20px;margin-left:5px">经期预期</div></li>
            </ul>
        </div>
        <div style="width:100%;height:120px">
            <div style="float:left;width:550px;font-size:40px;line-height:76px">
             <span style="margin-left:30px;font-weight:600">大姨妈来了</span>
            </div>
            <div  style="float:left;" class="weui-cell__ft">
                <label for="switchCP" class="weui-switch-cp">
                    <input id="switchCP" class="weui-switch-cp__input" type="checkbox" checked="checked">
                    <div class="weui-switch-cp__box">是否</div>
                </label>
            </div>
        </div>
    </div>



	<script src="js/jquery.js"></script> 
	<script src="js/jquery-weui.js"></script>
	<script src="js/calendar.js"></script> 

    <script src="js/picker.min.js"></script>
    <script src="js/data.js"></script>

  <script src="cj/city.js"></script>
  <script src="cj/picker.min.js"></script>
  <script src="cj/index.js"></script>


    <script>
          
          if(localStorage.getItem("cycles") == undefined || localStorage.getItem("days") == undefined){
            $('.content').css('display','block');
            $('.content2').css('display','none');
          }else{
            $('.content2').css('display','block');
          }

          var cycles  ;   //月经周期                     15-90天
          var days    ;   //默认天数是从设置页面传过来的    1-14天

          // var cycles = 28 ;   //月经周期                     15-90天
          // var days = 5 ;      //默认天数是从设置页面传过来的    1-14天
  
          var picker1El = document.getElementById('picker1');

          var picker1 = new Picker({
            data: [data1]
          });
          picker1.on('picker.select', function (selectedVal, selectedIndex) {
            picker1El.innerText = data1[selectedIndex[0]].text;
          });

          picker1El.addEventListener('click', function () {
            picker1.show();
          });



          var picker2El = document.getElementById('picker2');

          var picker2 = new Picker({
            data: [data2]
          });
          picker2.on('picker.select', function (selectedVal, selectedIndex) {
            picker2El.innerText = data2[selectedIndex[0]].text;
          });

          picker2El.addEventListener('click', function () {
            picker2.show();
          });


          // var picker3El = document.getElementById('picker3');

          // var picker3 = new Picker({
          //   data: [data3]
          // });
          // picker3.on('picker.select', function (selectedVal, selectedIndex) {
          //   picker3El.innerText = data3[selectedIndex[0]].text;
          //   days = Number(data3[selectedIndex[0]].text)
          // });

          // picker3El.addEventListener('click', function () {
          //   picker3.show();
          //   console.log(picker3);
          // });







        function login() {

            localStorage.setItem('cycles', Number(document.getElementById('picker1').innerText));
            localStorage.setItem('days', Number(document.getElementById('picker2').innerText));
            window.location.reload()
            

            // $.ajax({
            //     type: "POST",//方法类型
            //     dataType: "json",//预期服务器返回的数据类型
            //     url: "index.html" ,//url
            //     data: $('#form').serialize(),
            //     success: function (result) {
            //         console.log(result);//打印服务端返回的数据(调试用)
            //         if (result.resultCode == 200) {
            //             alert("SUCCESS");
            //         }
            //         ;
            //     },
            //     error : function() {
            //         console.log($('#form').serialize());
            //         alert("异常！");
            //     }
            // });
        }

    </script>

	<script>
        


            //少于十个+0
    var addZero = function (a){             
        if(a < 10)
        {
            return '0' + a
        }else{
            return a
        }
    };

    var trimLeft = function (str) {  
        var i = 0;  
        for (; i < str.length && str.charAt(i) == " "; i++);  
        return str.substring(i, str.length);  
    }  

    //数组根据索引删除
      Array.prototype.remove=function(dx)
    　{
    　　if(isNaN(dx)||dx>this.length){return false;}
    　　for(var i=0,n=0;i<this.length;i++)
    　　{
    　　　　if(this[i]!=this[dx])
    　　　　{
    　　　　　　this[n++]=this[i]
    　　　　}
    　　}
    　　this.length-=1
    　};

    //数组排序
    var objectArraySort = function (keyName) {
        return function (objectN, objectM) {
            var valueN = objectN[keyName]
            var valueM = objectM[keyName]
            if (valueN < valueM) return 1
                else if (valueN > valueM) return -1
                    else return 0
                }
        };

    //日期运算 日期加   日期/天数
    var addDate = function (date,days){ 
        var d=new Date(date); 
        d.setDate(d.getDate()+days); 
        var m=d.getMonth()+1; 
        return d.getFullYear()+'-'+ addZero(m) +'-'+ addZero(d.getDate()); 
    };

    //日期运算 日期减   日期/天数
    var redDate = function (date,days){ 
        var d=new Date(date); 
        d.setDate(d.getDate()-days); 
        var m=d.getMonth()+1; 
        return d.getFullYear()+'-'+ addZero(m) +'-'+ addZero(d.getDate()); 
    };
    
    //判断点击日期是否在json中   日期/json数组
    var norepeat = function(data,arr){
         for(var i = 0; i<arr.length; i++)
         {  
            if(arr[i].date == data)
            {return 'true'}
         };
         return 'false'
    };

    //连续日期为一个数组    json数组
    var newArr = function(data){

           var newSz =[];
           var n = 0;
           newSz[n] = [];
         
           for(var i = 0; i<data.length; i++)
           {   
               var d=new Date(data[i].date);
               d.setDate(d.getDate()-1); 
               var m=d.getMonth()+1;  
               var preDate = d.getFullYear()+'-'+addZero(m)+'-'+addZero(d.getDate()); //电脑减1的日期

                if(data.length == 1)
                    {newSz[0].push(data[i])
                }else{
                    if(i > 0)
                    {
                        if(data[i-1].date == preDate)
                        {   
                            newSz[n].push(data[i]);
                        }else{
                            n ++;
                            newSz[n] = [];
                            newSz[n].push(data[i]); 
                        }
                    }else{
                            newSz[0].push(data[0]); 
                    }
                }
           };
           return(newSz)
    };

    //日期比较大小
    var compare = function(a,b){
        return (new Date(a) > new Date(b))
    }
   
    //点击月经前的日期      重组数组/日期/设置天数
    var clickPre = function(newArr,now,setDays){
                if(newArr[0][0])
                {   
                    for(var i = 0; i<newArr.length; i++)
                    {   
                        //点击最后一次结束以后-日期

                        if(compare(now,newArr[newArr.length-1][newArr[newArr.length-1].length-1].date))   //点击后面
                        {   
                            return clast(newArr,now,setDays,newArr.length-1)
                        }else if(!compare(now,newArr[0][0].date))                                          //点击前面
                        {    
                            return cfirst(newArr,now,setDays,0)
                        }else{                                                                             //点击中间
                            return  cmid(newArr,now,setDays,i)
                        }
                    }
                    return
                }else{
                    return  {msg:'firstArr'};
                }
    }

    //逻辑
    var clast = function(newArr,now,setDays,i){
        var s1 = newArr[newArr.length-1][0].date;  //最后一段的最开始
        var s2 = now;
        var s3 = newArr[i][newArr[i].length-1].date;  //最后一段的最后
        
        //点击过去 
        s1 = new Date(s1.replace(/-/g, "/"));
        s2 = new Date(s2.replace(/-/g, "/"));
        s3 = new Date(s3.replace(/-/g, "/"));

        var days  = s2.getTime() - s1.getTime();      //点击的开始 - 最后一段的最开始
        var days2 = s2.getTime() - s3.getTime();      //点击的开始 - 最后一段的结束

        
        var time  = parseInt(days / (1000 * 60 * 60 * 24));
        var time2 = parseInt(days2 / (1000 * 60 * 60 * 24));

        if(time2 > 4)
        {       
                return {msg:'newstate',days:setDays};     //大于4天,新建周期
        }else{
            if(newArr[i].length+time2 > 14)
            {      
                return {msg:'solong',days:time2};        //添加总长连续超过14天
            }else{
                return {msg:'elaylag',days:time2};      //大于4天,新建周期
            }
        }
    };

    var cfirst = function(newArr,now,setDays,i){
        var s1 = newArr[i][0].date;  //第一段的最开始
        var s2 = newArr[i][newArr[i].length-1].date;  //第一段的最后
        var s3 = now;
        var s4 = addDate(s3,setDays)
        
            s1 = new Date(s1.replace(/-/g, "/"));
            s2 = new Date(s2.replace(/-/g, "/"));
            s3 = new Date(s3.replace(/-/g, "/"));
            s4 = new Date(s4.replace(/-/g, "/"));
                
        var days  =  s2.getTime() - s3.getTime();    //第一段的最后 - 点击经期开始过
        var days2 =  s1.getTime() - s4.getTime();    //第一段的开始 - 点击经期结束
            days3 =  s1.getTime() - s3.getTime();    //第一段的开始 - 点击经期开始过
            days  = parseInt(days / (1000 * 60 * 60 * 24));
            days2 = parseInt(days2 / (1000 * 60 * 60 * 24));
            days3 = parseInt(days3 / (1000 * 60 * 60 * 24));

        if(days2 > 3)
        {
            return {msg:'newstate',days:setDays}

        }else{
            if(days < 14)
            {   
                return {msg:'newstate',days:days3}
                //alert('合并')
            }else if(days2 < 4)
            {   
                return {msg:'solong',days:setDays}
                //alert('经期频繁')
            }else{
                return {msg:'newstate',days:setDays}
                //alert('新建经期')
            }
        };
    };

    var cmid = function(newArr,now,setDays,i){
        var compareArr = [];
        console.log(newArr);

        for(var s = 0; s<newArr.length; s++)
        {  
        var s1 = newArr[s][0].date                      //在哪两个区间上
        var s2 = now;
       

        s1 = new Date(s1.replace(/-/g, "/"));
        s2 = new Date(s2.replace(/-/g, "/"));
        var days  =  s1.getTime() - s2.getTime();    //第一段的最后 - 点击经期开始过
            days = parseInt(days / (1000 * 60 * 60 * 24));
            if(days>0){
                 compareArr.push({days:days,index:s});
            }else{
            }
        };

       var s5 = newArr[arrayMin(compareArr).index][0].date;//下一个的第一个


       var s6 = newArr[arrayMin(compareArr).index-1][newArr[arrayMin(compareArr).index-1].length-1].date;//上一个的最后一个
       var s7 = now;
       var s8 = addDate(now,setDays-1);  

           s5 = new Date(s5.replace(/-/g, "/"));
           s6 = new Date(s6.replace(/-/g, "/"));
           s7 = new Date(s7.replace(/-/g, "/"));
           s8 = new Date(s8.replace(/-/g, "/"));

        var d1 = s5.getTime() - s8.getTime();   
        var d2 = s7.getTime() - s6.getTime();   
        var d3 = s5.getTime() - s6.getTime(); 

            d1 = parseInt(d1 / (1000 * 60 * 60 * 24));   //后距离 
            d2 = parseInt(d2 / (1000 * 60 * 60 * 24));   //前距离
            d3 = parseInt(d3 / (1000 * 60 * 60 * 24));   //前后距离
        
        if(d3 < 5){
            return {msg:'solong',days:setDays}
        }else{
             if(d2 > 4 && d1 < 5){
                 return cfirst(newArr,now,setDays,arrayMin(compareArr).index)
             }else if(d1 > 3){
                return clast(newArr,now,setDays,arrayMin(compareArr).index-1)
             }else{
                return {msg:'solong',days:setDays}
             }
        }
        //console.log(arrayMin(compareArr))
    }
    
    var arrayMin =function (arrs){
        var min = arrs[0].days;
        var index = arrs[0].index;
        for(var i = 1, ilen = arrs.length; i < ilen; i+=1) {
            if(arrs[i].days < min.days) {
                min = arrs[i].days;
                index = arrs[i].index;
            }
        }
        return {days:min,index:index};
    }

    //去重
    var uniqueArray =function(array, key){
        var result = [array[0]];
        for(var i = 1; i < array.length; i++){
            var item = array[i];
            var repeat = false;
            for (var j = 0; j < result.length; j++) {
                if (item[key] == result[j][key]) {
                    repeat = true;
                    break;
                }
            }
            if (!repeat) {
                result.push(item);
            }
        }
        return result;
    };
    

    $('#ca').calendar({
    	width: 750,
    	height: 750,
        setCycles:Number(localStorage.getItem("cycles")),
        setDays:Number(localStorage.getItem("days")),
        data2: [],
        dataPl: [],
        dataPlr: [],
        dataRed: [],
        selectDay:[],
        dataYc:[],

        onSelected: function (view, date, data, a) {
    	    //data为月经时间json
    	    //date选择的日期
          //  a.setCycles = cycles;
            console.log(a.setCycles)
            console.log(a.setDays)

        	var nowDate   = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
        	var initDate  = new Date(date)
        	var selectDate= initDate.getFullYear() + '-' + (initDate.getMonth() + 1) + '-' + initDate.getDate();
        	var date = new Date(date);  
            var date_value=date.getFullYear() + '-' + addZero((date.getMonth() + 1)) + '-' + addZero(date.getDate())   //选择的日期
            
        	if($(this).attr('class') == '' || $(this).attr('class') == 'selected' || trimLeft($(this).attr('class'))  == 'now')   //点击显示当月
        	{   
                if(a.setDays){
                    //开光
                    var isRed = function(){

			            			data.forEach(function(item,index){
			                                if(item.date == date_value){        //点击的在数组中
                                                var sk = addDate(data[index].date,0)
                                                var dc = data.length;
                                                
                                                for(var r = 1 ; r < dc; r ++){   
                                                    sk = addDate(sk,1);
                                                    if(!data[index+1]){   
                                                    }else{
                                                        if(data[index+1].date == sk){   
                                                            data.remove(index+1);
                                                        }
                                                    };
                                                };
                                                

                                                if(data[index-1] == undefined){
                                                       data.remove(index);
                                                }else if(data[index-1].date != redDate(date_value,1)){
                                                        data.remove(index);
                                                };
			                                };
			            			});

                                   
                                    
                                    $('.date-items li span').removeClass("dotPl")
                                    a.renderPl(); 
                                    a.renderPlr();
                                    a.renderYc();    
				            		a.fillDateItems(date.getFullYear(),addZero((date.getMonth() + 1)));
				            		return false
				    };     ////点击经期地方
                    var isNormal = function(){


                    	var st = clickPre(newArr(data),date_value,a.setDays);
                    
	                    if(st.msg == 'elaylag')
	                    {   
	                        for(var i =0; i<st.days; i++)
	            	        { 
		                        data.push({date:redDate(date_value,i),value:'1'});
		                	    data.sort(objectArraySort('date')).reverse();
                                a.renderPl();
                                a.renderPlr();
                                a.renderYc();
		                		a.fillDateItems(date.getFullYear(),addZero((date.getMonth() + 1)));
	                        }
	                    }

	                    if(st.msg == 'newstate' || st.msg == 'firstArr')   // 新经期 或者 初次渲染
	                    {   
	                    	var dd = st.days || a.setDays
	                    	for(var i =0; i<dd; i++)
	            	        {
	                	        data.push({date:addDate(date_value,i),value:'1'});
		                	    data.sort(objectArraySort('date')).reverse();
                                a.renderPl();
                                a.renderPlr();
                                a.renderYc();
		                		a.fillDateItems(date.getFullYear(),addZero((date.getMonth() + 1)));
	                        };
	                    }
	                    if(st.msg == 'solong')
	                    {   
		                        	alert('经期频繁');
		            }}   ////点击空白日期
                   
            		if(norepeat(date_value,data) == 'true')  //判断是否超重复点击过
            		{   
			               isRed();
            		}else{
			               isNormal();
                           a.renderPl();
            		};
            	    //点击月经前的日期
                };
                a.fillDateItems(date.getFullYear(),addZero((date.getMonth() + 1)));
        	}else{           //点击上下一月灰色字
        		return
        	};
       }
    });
</script>
</body>
</html>